<template>
    <div class="full-screen-container min-h-screen bg-gray-50">
        <div class="flex h-screen">
            <!-- 左侧菜单 -->
            <div class="w-64 bg-[#2C3E50] text-white">
                <div class="flex items-center h-16 px-4">
                    <img src="https://ai-public.mastergo.com/ai/img_res/f5ee068fa13cf489fd924b8c87fbccc0.jpg" alt="logo"
                         class="w-8 h-8 mr-2" />
                    <span class="text-lg font-medium">人才画像后台管理系统</span>
                </div>
                <div class="px-2">
                    <template v-for="(item, index) in menuItems" :key="index">
                        <!-- 菜单项 -->
                        <div
                                class="flex items-center px-4 h-12 rounded-lg cursor-pointer mb-1 hover:bg-blue-500 transition-colors duration-200"
                                :class="{ 'bg-blue-600': item.active }"
                                @click="handleMenuClick(index)">
                            <el-icon class="mr-3">
                                <component :is="item.icon" />
                            </el-icon>
                            <span>{{ item.name }}</span>
                        </div>

                        <!-- 渲染子菜单，点击测评管理后才显示 -->
                        <div v-if="item.subMenu && item.active" class="pl-8">
                            <div v-for="(subItem, subIndex) in item.subMenu" :key="subIndex"
                                 class="flex items-center px-4 h-10 rounded-lg cursor-pointer mb-1 hover:bg-blue-400 transition-colors duration-200"
                                 :class="{ 'bg-blue-500': subItem.active }"
                                 @click="handleSubMenuClick(subItem, subIndex, index)">
                                <span>{{ subItem.name }}</span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <!-- 右侧内容 -->
            <div class="flex-1 flex flex-col overflow-hidden">
                <!-- 顶部导航 -->
                <div class="h-16 bg-white border-b flex items-center justify-between px-6">
                    <div class="flex items-center">
                        <el-icon class="text-lg cursor-pointer">
                            <Expand />
                        </el-icon>
                        <div class="ml-4 text-gray-500">
                            <!-- 动态面包屑 -->
                            <span v-for="(crumb, idx) in breadcrumbs" :key="idx">
                                {{ crumb }}
                                <template v-if="idx !== breadcrumbs.length - 1"> / </template>
                            </span>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <el-dropdown trigger="click">
                            <el-icon class="text-lg cursor-pointer">
                                <Setting />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-for="(item, index) in dropdownItems" :key="index">
                                        <div class="flex items-center space-x-2">
                                            <el-icon>
                                                <component :is="item.icon" />
                                            </el-icon>
                                            <span @click="jump(item.path)">{{ item.label }}</span>
                                        </div>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </div>
                </div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, watch, computed } from 'vue';
    import type { FormInstance, FormRules } from 'element-plus';
    import {
        Search,
        Expand,
        Bell,
        FullScreen,
        Setting,
        HomeFilled,
        User,
        UserFilled,
        Lock,
        Document,
        List
    } from '@element-plus/icons-vue';
    import { useRouter, useRoute } from "vue-router";
    const router = useRouter();
    const route = useRoute();

    // 菜单项数据
    const menuItems = ref([
        { name: '首页', icon: 'HomeFilled', active: false, path: '/system/home' },
        { name: '用户管理', icon: 'User', active: false, path: '/system/usermanage', subMenu: [
                { name: '用户管理', path: '/system/usermanage', active: false },
                { name: '学生管理', path: '/system/studentmanage', active: false },
                { name: '教师管理', path: '/system/teachermanage', active: false },
                { name: '招聘方管理', path: '/system/bossmanage', active: false },
                { name: '普通管理员管理', path: '/system/administratormanage', active: false }
            ] },
        { name: '权限管理', icon: 'Lock', active: false, path: '/system/authmanage' },
        { name: '测评管理', icon: 'Document', active: false, path: '/system/manage', subMenu: [
                { name: '题型管理', path: '/system/topictypemanage', active: false },
                { name: '题目管理', path: '/system/topicmanage', active: false }
            ] },
        { name: '岗位管理', icon: 'Briefcase', active: false, path: '/system/poststationmanage' },
        { name: '通知公告', icon: 'Bell', active: false, path: '/system/noticemanage' },
    ]);

    // 动态生成面包屑
    const breadcrumbs = ref(['首页']);

    // 获取当前路径
    const currentPath = computed(() => route.path);

    // 监听路由变化
    watch(currentPath, () => {
        breadcrumbs.value = findBreadcrumbs();
    });

    // 查找面包屑路径
    function findBreadcrumbs() {
        const crumbPath = [];
        const currentPath = route.path;

        function recursiveSearch(items) {
            for (const item of items) {
                if (item.path === currentPath) {
                    crumbPath.push(item.name);
                    return true;
                }
                if (item.subMenu) {
                    const found = recursiveSearch(item.subMenu, crumbPath);
                    if (found) {
                        crumbPath.push(item.name);
                        return true;
                    }
                }
            }
            return false;
        }

        recursiveSearch(menuItems.value);
        return ['首页', ...crumbPath.reverse()];
    }

    // 菜单项点击事件
    const handleMenuClick = (index: number) => {
        const item = menuItems.value[index];

        // 清除所有其他菜单的 active 状态
        menuItems.value.forEach((menuItem, idx) => {
            if (idx !== index) {
                menuItem.active = false;
                // 关闭子菜单
                if (menuItem.subMenu) {
                    menuItem.subMenu.forEach(subItem => subItem.active = false);
                }
            }
        });

        // 如果点击的是有子菜单的项，切换子菜单的显示与隐藏
        if (item.subMenu) {
            item.active = !item.active; // 切换active状态
        } else {
            // 没有子菜单的项，切换状态并跳转路由
            item.active = true;
            router.push(item.path);
        }
    };

    // 子菜单点击事件
    const handleSubMenuClick = (subItem: any, subIndex: number, parentIndex: number) => {
        // 清除父菜单的 active 状态
        menuItems.value[parentIndex].subMenu.forEach(item => item.active = false);

        // 设置当前子菜单项的 active 状态
        subItem.active = true;

        // 跳转到相应的路由
        router.push(subItem.path);
    };

    // 下拉菜单跳转
    const dropdownItems = [
        { label: '退出登录', icon: 'SwitchButton', path: '/' },
    ];
    function jump(path: string) {
        if (path == '/') {
            localStorage.removeItem("prehaslogin");
            localStorage.removeItem("userInfo");
        }
        router.push(path);
    }
</script>

<style scoped>
    .el-input :deep(.el-input__wrapper) {
        border-radius: 4px;
        box-shadow: 0 0 0 1px #dcdfe6 inset;
    }

    .el-input :deep(.el-input__wrapper.is-focus) {
        box-shadow: 0 0 0 1px #409eff inset;
    }

    .el-table :deep(.el-table__header) {
        background-color: #f5f7fa;
    }

    .el-pagination :deep(.el-pagination__sizes .el-input .el-input__wrapper) {
        box-shadow: 0 0 0 1px #dcdfe6 inset;
    }

    :deep(.el-select .el-input .el-input__wrapper) {
        box-shadow: 0 0 0 1px #dcdfe6 inset;
    }

    :deep(.el-date-editor .el-input__wrapper) {
        box-shadow: 0 0 0 1px #dcdfe6 inset;
    }

    /* 设置页面容器宽度为 100vw 和高度为 100vh，保证页面大小与浏览器同步 */
    .full-screen-container {
        width: 100vw;
        /* 浏览器窗口的宽度 */
        height: 100vh;
        /* 浏览器窗口的高度 */
        background-color: #ffffff;
        /* 可以选择合适的背景色 */
        margin: 0;
        /* 去除默认的外边距 */
        padding: 0;
        /* 去除默认的内边距 */
    }

    /* 如果有特定的样式应用于 .body，可以考虑调整 */
    .body {
        width: 100%;
    }
</style>